<#escape x as (x)!"">
	
	<div class="main-container">
<!-- 		<div class="toolbar"> -->
<!-- 			<a href="javascript:;" class="btn btn-other" -->
<!-- 				onclick="selectBatchUser();">批量选择</a> -->
<!-- 		</div> -->
		<table class="table table-bordered table-hover">
<!-- 			<caption class="caption none" id="chkedInfo"> -->
<!-- 				<div class="caption-table"> -->
<!-- 					你已经选择<em id="chkLength" class="chkNumber">0</em>条记录！  -->
<!-- 					<span class="none">选择的值是：<input type="text" name="chkTotal" id="chkTotalVal" value="" /></span> -->
<!-- 				</div> -->
<!-- 			</caption> -->
			<thead class="thead thead-more">
				<tr>
					<td>姓名</td>
					<th class="ui-td-chk"><input type="checkbox" name="checkAll" id="chkAll" onchange="batch(this)"/>全选</th>
				</tr>
			</thead>
			<tbody class="tbody mod-tbody">
				<#if list?? && list?size gt 0>
				<#list list as item>
				<tr>
					<td>${item.userName!''}</td>
					<td class="ui-td-chk">
						<input type="checkbox" name="chkItem" value="${item.id}" data-name="${item.userName!''}" data-id="${item.id}" onchange="single(this)"/>
					</td>
				</tr>
				</#list>
				<#else>
				<tr>
					<td colspan="11"><p class="no-data">没有相关数据</p></td>
				</tr>
				</#if>
			</tbody>
		</table>
	</div>
	
<script type="text/javascript">
	var single = function(o) {
		if ($(o).is(':checked')) {
			add($(o).attr("data-id"), $(o).attr("data-name"));
		} else {
			del($(o).attr("data-id"));
		}
	}
	
	var batch = function(o) {
		var checked = $(o).is(':checked')
		$("input[name='chkItem']").each(function() {
			if (checked) {
				add($(this).attr("data-id"), $(this).attr("data-name"));
			} else {
				del($(this).attr("data-id"));
			}
		});
	}
	
	var add = function(id, name) {
		if ($(".choice-box .choice-item[data-id="+id+"]").length == 0) {
			var str = '<div class="choice-item ope-color" data-id="'+id+'"><span>'+name+'</span><a href="javascript:;" onclick="del('+id+')" class="icon-delete">删除</a></div>';
			$(".choice-box").append(str);
		}
	}
	
	var del = function(id) {
		$(".choice-box .choice-item[data-id="+id+"]").remove();
		$("input[data-id="+id+"]").attr("checked", false);
	}
	
</script>
</#escape>
